/**
 * payPassword
 * @module @/components/payPassword.vue
 * @desc 支付密码

 * @event payshow - 显示:true 隐藏:false   
 * @event backFnc - 关闭POP
 * @event v-model - 参数 数组
 * @event forget  - 忘记密码url
 *
 * @example
 * <pay-password
    :payshow="false"   
    @backFnc="backFnc"
    v-model="password"
    :forget="forget"
  ></pay-password>
 */

<template>
    <mt-popup v-model="show" position="bottom" class="mint-popup-4" style="width:100%">  
        <div class="pay-tool">
            <div class="pay-tool-title">
                <span @click="backHandle">×</span>请输入支付密码
            </div>
            <div class="pay-tool-content">
                <div class="pay-tool-inputs">
                    <div class="item" v-for="i in items">{{password[i]?"*":''}}</div>
                </div>
                <div class="text-right f32 pr50 pt30 pb30" v-if="forget"><router-link class="alink" to="/getP">忘记密码？</router-link></div>
            </div>
            <div class="pay-tool-keyboard">
                <ul>
                    <li @click="keyUpHandle($event)">1</li><li @click="keyUpHandle($event)">2</li><li @click="keyUpHandle($event)">3</li>
                </ul>
                <ul>
                    <li @click="keyUpHandle($event)">4</li><li @click="keyUpHandle($event)">5</li><li @click="keyUpHandle($event)">6</li>
                </ul>                              
                <ul>
                    <li @click="keyUpHandle($event)">7</li><li @click="keyUpHandle($event)">8</li><li @click="keyUpHandle($event)">9</li>
                </ul>  
                <ul>
                    <li @click="keyUpHandle($event)" style="background-color:#e3e7ee"></li><li @click="keyUpHandle($event)">0</li><li @click="delHandle"  style="background-color:#e3e7ee"><span class="icon-del"><</span></li>
                </ul>           
            </div>
            
        </div>
    </mt-popup>    
</template>
<script>
export default {
    props:{
        payshow:{
            type: Boolean,
            required: false,
            default: false
        },
        forget:{
            type: String,
            default:''
        }
    },
    data(){
        return{
            items: [0, 1, 2, 3, 4, 5],
            password:[],
            show:this.payshow,
        }
    },
    watch: {
        payshow (val) {
            this.show = val
        },
        show(val){
            this.$emit('update:payshow',val);
        }
    },
    methods:{
        backHandle () {
            this.clearPasswordHandle()  // 返回时清除password
            this.show = false;
            this.$emit('backFnc') // 返回上级
        },
        keyUpHandle (e) {
            let text = e.currentTarget.innerText
            let len = this.password.length
            if (!text || len >= 6) return
            this.password.push(text)
            this.$emit('input',this.password)
            this.ajaxData()
        },
        delHandle () {
            if (this.password.length <= 0) return false
            this.password.shift()
        },
        ajaxData () {
            if (this.password.length >= 6) {
              console.log(parseInt(this.password.join(' ').replace(/\s/g, '')))
            }
            return false
        },
        clearPasswordHandle: function () {
            this.password = []
        }


    }

}
</script>
<style scoped>
    .pay-tool { position: absolute; background-color: #f9f9f9; overflow: hidden; bottom:0px; width:100%;}
    .pay-tool-title { width: 100%; position:relative; line-height:1rem; height:1rem; text-align: center;  overflow: hidden;  font-size:.36rem; border-bottom:1px solid #e3e7ee;}
    .pay-tool-title span{opacity: .5; font-size:.6rem; width:.5rem; position:absolute; left:.2rem}
    .pay-tool-inputs { width: 80%; margin: .5rem auto .2rem;  border: 1px solid #e3e7ee;  border-radius: .15rem; display: flex; background-color:#fff;}
    .pay-tool-inputs .item {width: 16.66666666%; line-height:1.3rem; height:1rem; border-right: 1px solid #e3e7ee; text-align: center; }
    .pay-tool-inputs .item:last-child { border-right: none;}
    .pay-tool-keyboard {width: 100%; background-color:#fff;}
    .pay-tool-keyboard  ul {  width: 100%;  display: -webkit-box; display: -ms-flexbox; display: flex;}
    .pay-tool-keyboard  ul li { -webkit-box-flex: 1; line-height:1rem; -ms-flex: 1;  flex: 1;  text-align: center;  border-right: 1px solid #e3e7ee; border-bottom: 1px solid #e3e7ee; font-size: .36rem; font-weight: bold;}
    .pay-tool-keyboard  ul li:nth-child(3){ border-right:none;}
</style>